<template>
  <!-- 搜索框 -->

  <van-search
    v-model="searchValue"
    placeholder="请输入关键字"
    shape="round"
    clearable
    show-action
    @update:modelValue="onChange"
    @search="onSearch"
    @clear="onClear"
  >
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>
</template>

<script setup>
import { ref } from 'vue'
import { throttle } from 'lodash'
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:modelValue', 'search', 'clear'])
const searchValue = ref(props.modelValue)
const onSearch = () => {
  emit('search', searchValue.value)
}
const onClear = () => {
  emit('clear')
}
const onChange = throttle(() => {
  emit('update:modelValue', searchValue.value)
}, 1500)
</script>

<style scoped>
:deep(.van-search__action) {
  color: var(--color-black);
}
</style>
